var HOST = 'https://googledrive.com/host/0B9hAFdOXkP2uUUZXazd0MHI0dk0/';
$(function() {
    // bind events    
    $('#music').click(function() {       
        var myAudio = $('#bgsound')[0];
        if (myAudio == undefined) return;
        myAudio.paused ? myAudio.play() : myAudio.pause();        
        $(this).css('color', 'sienna');
    });
    
    $('#myVideo').click(function() {       
        $('#myVideoContents').css('display', '');
        $('#fotorama').css('display', 'none');
        ImageUtility.loadImageFormFile(url);    		
    });
    $('#contact').click(function() {        
        alert('Name: Chu Anh Hà \r\n Email: haca125@gmail.com \r\n Phone: 0982.314.827 \r\n Face: https://www.facebook.com/ChuAnhHa');        
    });
    $('#rss').click(function() {
        window.open("http://news.qtrang.vn.ae/");
    });
    $('#shop').click(function() {
        window.open("http://shop-thoitrang.appspot.com/");
    });
    $('#playlist_music').click(function() {
        window.open("http://music.qtrang.vn.ae/");
    });
    $('#giaothong').click(function() {
        window.open("giaothong.jsp");
    });
    // set init for page
    init();
});
/**
set init for page
*/
function init() {
	$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
    // load list video from video.txt
    ImageUtility.readDataFile(HOST + 'video.txt').done(function(htmlContent) {
        $('#myVideoContents').html(htmlContent);
    });
	 $('a.no-u.images').bind('click', menuItemClick);
	 $('.nav').find('a').css('font-size', '14px');
    // clear data from session
    sessionStorage.clear();  
    // load data default.
    ImageUtility.renderImages();
}
function objData(url) {
		this.img = url;
}
/**
Click menu item
*/
var menuItemClick = function(){
    $('#myVideoContents').css('display', 'none');
    $('#fotorama').css('display', '');
    var name = $(this).attr('name');
    var fileName = HOST + name + '.txt';
    var url = fileName;
    sessionStorage.setItem("name", name);
    ImageUtility.loadImageFormFile(url);    
}
var zoomImg = function() {
    var $section = $('#fotorama');
    var $panzoom = $section.find('div.fotorama__stage__frame.fotorama__loaded.fotorama__loaded--img.fotorama__active').panzoom();
    $panzoom.parent().on('mousewheel.focal', function(e) {
        e.preventDefault();
        var delta = e.delta || e.originalEvent.wheelDelta;
        var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
        $panzoom.panzoom('zoom', zoomOut, {
            increment : 0.2,
            minScale : 1,
            maxScale : 5,
            contain : true,
            focal : e
        });
    });
};
var autoPlay = true;
var ImageUtility = {

    loadImageFormFile : function(url) {
        if (sessionStorage.getItem(sessionStorage.getItem("name"))) {
            ImageUtility.updateImage(sessionStorage.getItem(sessionStorage.getItem("name")));
        } else {
            ImageUtility.readFiles(url).done(function(images_html) {
                sessionStorage.setItem(sessionStorage.getItem("name"), images_html)
                ImageUtility.updateImage(images_html);
            });
        }       
    },
    updateImage : function(images_html) {
        var options = this.setupOptions();
        var $fotoramaDiv = $('#fotorama').fotorama(options);
        var fotorama = $fotoramaDiv.data('fotorama');		
		fotorama.load(images_html);
        $('#fotorama').on('fotorama:load', zoomImg);
    },
    renderImages : function() {
        var fileName = 'quynhtrang.txt';
        var url = HOST + fileName;
        sessionStorage.setItem("name", "trang");       
        ImageUtility.loadImageFormFile(url);       
    },
    readFiles : function(url) {
        var def = $.Deferred();
        var contents = '';
        $.get(url, function(data) {
            var lines = data.split("\n");
			var result = [];
            for (var i = 0, len = lines.length; i < len; i++) {
                if (lines[i].length <= 0) {
                    continue;
                }                 
				var item = new objData(lines[i]);
				result.push(item);				
            }			
            def.resolve(result);
        }, "text");
        return def.promise();
    },
    readDataFile: function(url) {
        var def = $.Deferred();
        var contents = '';
        $.get(url, function(data) {
            def.resolve(data);
        }, "text");
        return def.promise();
    },
    setupOptions : function() {
        // Change ↓values↓, press ↑Run↑, see →Result→
        return {
            aspectRatio : 16 / 9,
            width : '90%',
            minWidth : '80%',
            maxWidth : '100%',
            minHeight : '80%',
            maxHeight : '90%',

            transition : 'slide', // slide, crossfade or 'fade' or dissolve
            click : true,
            loop : true, // or true
            keyboard : true,

            autoplay : true,
            stopAutoplayOnAction : false,
            stopautoplayontouch : false,

            transitionDuration : 1000,

            background : 'azure',
            // 'black', '#b10000', or url(bg.png)
            margin : 0,
            minPadding : 0,
            alwaysPadding : false,
            zoomToFit : true,
            cropToFit : false,
            cropToFitIfFullscreen : false,

            flexible : true,
            fitToWindowHeight : false,
            fitToWindowHeightMargin : 20,

            fullscreen : true,
            fullscreenIcon : true,
            allowfullscreen : true,

            vertical : false,

            arrows : true,
            arrowsColor : null,
            arrowPrev : null,
            arrowNext : null,

            spinnerColor : '#808080',

            nav : 'dots', // or 'dots', or 'none'
            navPosition : 'auto',
            // 'top' | 'right' | 'bottom' || 'left'
            navBackground : null,
            dotColor : null,
            thumbSize : 36, // 36 or 51, whatever :-)
            thumbMargin : 4,
            thumbBorderWidth : 2,
            thumbBorderColor : null,
            // 'white', '#ff9', or even '#00ff84 #00eb89 #00b66f'
            thumbsCentered : true,
            hideNavIfFullscreen : false,

            caption : 'nome', // 'simple', or 'none' or 'overlay'

            preload : 1,
            preloader : 'white', // dark or 'white'

            shadows : true,

            data : null,
            // e.g. [{img: 'http://fotoramajs.com/;-)/03.jpg'}, {img: 'broken.jpg'}, {img: 'http://fotoramajs.com/;-)/13.jpg'}]

            html : null,

            hash : false,
            startImg : 0,

            cssTransitions : true,

            onShowImg : null,
            onClick : null,
            onFullscreenOpen : null,
            onFullscreenClose : null,
            onTransitionStop : null
        };
    }
}

